<template>
  <div id="app" class="custom-scroll" @scroll="scrollHandler" :class="{ 'header-shadow' : headerShadow }">
    <header-view :show="show" @logout="logout"></header-view>
    <router-view/>
  </div>
</template>

<script>
import './assets/font/iconfont.css'
import HeaderView from '@/components/header/Header'
import { mapMutations } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      show: true,
      headerShadow: false
    }
  },
  watch: {
    '$route': ['setHeader']
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    setHeader () {
      let path = this.$route.path
      if (path === '/login' || path === '/enter' || path === '/addInfo' || path === '/role-admin') {
        this.show = false
      } else {
        this.show = true
      }
    },
    logout () {
      this.$router.replace({path: '/login'})
    },
    scrollHandler (event) { // 初始化执行的时候需要加上 $nextTick()
      let nowTop = event.target.scrollTop

      // 头部阴影
      this.headerShadow = nowTop > 0
    }
  },
  components: {
    HeaderView
  }
}
</script>

<style lang="scss">
html, body {
  height: 100%;
  overflow-y: hidden;
}
#app {
  height: 100vh;
}
</style>
